<template>
  <a-modal
    v-if="record"
    :title="`为角色“${record.role_name}”设置用户`"
    v-model="$parent.showUserModel"
    :footer="null"
    :width="760"
    class="setUser"
  >
    <a-spin size="large" tip="加载中..." :spinning="spinning">
      <div class="spin-content">
        <div class="column" style="border-right:1px solid #ddd;">
          <div class="header">
            <div class="title">已有该角色的用户</div>
            <div class="search">
              <a-input-search id="user_name1" size="small" placeholder="请输入用户名" @search="onSearch1" />
            </div>
          </div>
          <div class="content">
            <div
              @click="removeRole(item,index)"
              :key="index"
              class="item"
              v-for="(item,index) in usersHasRole"
            >
              <div class="text">{{item.user_name}}</div>
              <div class="btn">
                <a-icon type="right-circle" />
              </div>
            </div>
          </div>
          <div class="foot">
            <a-pagination
              v-if="dataCount1 > 0"
              @change="pageChange1"
              v-model="pageIndex1"
              :total="dataCount1"
              :pageSize="pageSize"
              size="small"
              style="float:right"
            />
          </div>
        </div>
        <div class="column">
          <div class="header">
            <div class="title">尚无该角色的用户</div>
            <div class="search">
              <a-input-search id="user_name2" size="small" placeholder="请输入用户名" @search="onSearch2" />
            </div>
          </div>
          <div class="content">
            <div
              @click="setRole(item,index)"
              :key="index"
              class="item"
              v-for="(item,index) in usersNotHasRole"
            >
              <div class="text">{{item.user_name}}</div>
              <div class="btn">
                <a-icon type="left-circle" />
              </div>
            </div>
          </div>
          <div class="foot">
            <a-pagination
              size="small"
              v-if="dataCount2 > 0"
              @change="pageChange2"
              v-model="pageIndex2"
              :total="dataCount2"
              :pageSize="pageSize"
              style="float:right"
            />
          </div>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>
<script>
//todo 搜索用户，翻页
export default {
  data() {
    return {
      usersNotHasRole: [],
      usersHasRole: [],
      record: null,
      spinning: false,
      pageSize: 38,
      pageIndex1: 1,
      dataCount1: 0,
      pageIndex2: 1,
      dataCount2: 0
    };
  },
  methods: {
    onSearch1() {
      let user_name = document.querySelector("#user_name1").value;
      this.getUsersByRoleId(0, user_name);
    },
    onSearch2() {
      let user_name = document.querySelector("#user_name2").value;
      this.getUsersNotHasRoleId(0, user_name);
    },
    async pageChange1(pageIndex) {
      let user_name = document.querySelector("#user_name1").value;
      this.getUsersByRoleId(pageIndex - 1, user_name);
    },
    async pageChange2(pageIndex) {
      let user_name = document.querySelector("#user_name2").value;
      this.getUsersNotHasRoleId(pageIndex - 1, user_name);
    },
    async getUsersByRoleId(page_index = 0, user_name = "") {
      let usersHasRole = await this.$post("/system/userRole/getUsersByRoleId", {
        role_id: this.record.id,
        page_index,
        user_name,
        page_size: this.pageSize
      });
      if (usersHasRole.error) return;
      this.usersHasRole = usersHasRole.data;
      this.dataCount1 = usersHasRole.data_count;
      this.pageIndex1 = page_index + 1;
    },
    async getUsersNotHasRoleId(page_index = 0, user_name = "") {
      let usersNotHasRole = await this.$post(
        "/system/userRole/getUsersNotHasRoleId",
        {
          role_id: this.record.id,
          page_index,
          user_name,
          page_size: this.pageSize
        }
      );
      if (usersNotHasRole.error) return;
      this.usersNotHasRole = usersNotHasRole.data;
      this.dataCount2 = usersNotHasRole.data_count;
      this.pageIndex2 = page_index + 1;
    },
    async setRole(item, index) {
      this.spinning = true;
      let result = await this.$post("/system/userRole/giveRoleToUser", {
        role_id: this.record.id,
        user_id: item.id
      });
      if (result.error) return;
      this.$notification.success({ message: "设置成功" });
      this.usersHasRole.splice(0, 0, item);
      this.dataCount1 += 1;
      this.dataCount2 -= 1;
      this.usersNotHasRole.splice(index, 1);
      this.spinning = false;
    },
    async removeRole(item, index) {
      this.spinning = true;
      let result = await this.$post("/system/userRole/removeRoleFromUser", {
        role_id: this.record.id,
        user_id: item.id
      });
      if (result.error) return;
      this.$notification.success({ message: "设置成功" });
      this.usersNotHasRole.splice(0, 0, item);
      this.usersHasRole.splice(index, 1);
      this.dataCount1 -= 1;
      this.dataCount2 += 1;
      this.spinning = false;
    }
  }
};
</script>
<style>
.setUser .ant-modal-body {
  padding: 12px !important;
}
</style>

<style socped lang="scss">
.setUser {
  .spin-content {
    display: flex;
  }
  .foot {
    height: 38px;
  }
  .btn {
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
    color: #1890ff;
  }
  .text {
    display: inline-block;
    padding-left: 8px;
  }
  .item {
    line-height: 32px;
    height: 32px;
    display: inline-block;
    background: #e6f7ff;
    margin: 6px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #e6f7ff;
  }
  .item:hover {
    color: #1890ff;
    border: 1px solid #1890ff;
  }
  .content {
    padding-top: 12px;
    flex: 1;
    overflow-y: auto;
  }
  .title {
    height: 24px;
    line-height: 24px;
    flex: 1;
  }
  .search {
    width: 160px;
  }
  .header {
    display: flex;
  }
  .column {
    width: 50%;
    padding: 12px;
    padding-bottom: 0px;
    display: flex;
    flex-direction: column;
    height: 380px;
  }
}
</style>


